<template>
  <div class="about">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>名字</th>
          <th>价格</th>
          <th>类型</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in arr" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.type }}</td> <!-- 这里补充了td标签 -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { getCode } from "@/utils/https";
import { onMounted, ref } from "vue";

export default {
  setup() {
    let arr = ref([]);
    
    onMounted(() => {
      getCode().then((res) => {
        console.log(res);
        arr.value = res.data;
      });
    });
    
    return { arr };
  },
};
</script>
<style lang='less' scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>
